<template>
  <el-cascader
    ref="elDatePicker"
    style="width: 100%"
    v-model="currentValue"
    :options="options"
    :props="props"
    @change="handleChange"
    clearable
  />
</template>
<script>
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['multi', 'name', 'label', 'value', 'disabled', 'optionsurl'],
  data() {
    return {
      options: [],
      props: {
        value: 'codcode',
        label: 'codname',
        children: 'children'
      },
      currentValue: null
    }
  },
  watch: {
    value(val) {
      this.currentValue = this.value
      if (!val) {
        this.$refs.elDatePicker.checkedValue = []
        this.$refs.elDatePicker.presentText = null
        this.$refs.elDatePicker.inputValue = null
      }
    }
  },
  created() {
    this.currentValue = this.value
    this.queryAction()
  },
  methods: {
    handleChange(value) {
      // console.log(this.$refs.elDatePicker)
      this.$emit('input', this.name, value[value.length - 1])
    },
    queryAction() {
      this.api[this.optionsurl]({}).then(res => {
        this.options = res
      })
    }
  }
}
</script>
